<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 登录表单区域 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" status-icon label-width="80px"
                class="login_form">
                <!-- 用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" show-password
                        prefix-icon="iconfont icon-3702mima">
                    </el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btn">
                    <el-button type="primary" @click="login()">登录</el-button>
                    <el-button type="info" @click="resetForm('loginFormRef')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<!-- 注意element是按需导入，要用什么记得先引入。注意表单名称是ref="loginFormRef"，表单实例对象，也可以认为是表单的id，通过 $refs 获取 DOM 元素。
注意@click="submitForm('loginFormRef')"，@click="resetForm('loginFormRef')"，调用函数（）里面是字符串带引号。
密码眼睛show-password，结果图标status-icon。
1，使用element form，布置骨架，加入图标。2，数据双向绑定:model="loginForm"，data定义好。3，表单验证规则 :rules="loginFormRules"，加prop属性。
4，表单重置，this是当前登录组件的实例对象。5，表单验证，配置axios，全局挂载在vue原型对象上,验证通过就发送请求，看接口文档格式，注意加async 修饰成异步函数和await，解构赋值，
6，弹框消息提示，element，meaasge,需要全局挂载在vue原型对象上，7，保存token，并跳转到 /home,8,首页加退出功能，
8，处理eslint语法错误，格式化文档和eslint语法冲突？加配置文件.prettierrc，取消分号，采用单引号，其他错误直接那错误放入.eslintrc文件的rules里，禁用，0，-->
<script>
export default {
    name: '',
    data() {
        return {
            // 这是登录表单的数据绑定对象
            // 登录表单信息，双向绑定数据:model，这里默认了用户名admin，密码123456，
            loginForm: {
                username: 'admin',
                password: ''
            },
            // 登录的验证规则，记得上面加prop属性， // 这是表单的验证规则对象
            loginFormRules: {
                username: [ // 验证用户名是否合法
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [// 验证密码是否合法
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
            }

        }
    },
    methods: {
        //点击登录的时候先调用validate方法验证表单内容是否有误
        // submitForm(loginFormRef) {
        login() {
            // 1，进行表单验证
            // this.$refs['loginFormRef'].validate((valid) => {  //注意引号
            this.$refs.loginFormRef.validate(async valid => {    //注意async ，和 await ，牵连res.meta，
                // console.log(valid);  //表单对象的validate函数，第一个参数valid是布尔值，表示是否验证通过，后面的参数是回调函数
                // 2，如果验证失败，直接退出后续代码的执行，就是不发送请求
                if (!valid) return
                // 3，如果验证通过后这里完成登录成功后的相关操作（保存token、跳转到主页）
                // const result = await this.$http.post('login', this.loginForm)
                // console.log(result); //返回的是一个promise，如果不想promise对象，想要具体响应对象，加async 修饰成异步函数和await，返回的就不是promise，
                const { data: res } = await this.$http.post('login', this.loginForm)
                console.log(res); 
                //注意这里const { data: res }，解构赋值，就是返回的数据很多，只需要data一项属性，就吧对象的data解构出来，只要data，重命名为res ,
                // 4，如果登录失败
                // if (res.meta.status != '200') return console.log("登录失败")   //注意return
                if (res.meta.status != '200') return this.$message.error('登录失败')   //注意return
                // return this.$message.error('登录失败:' + res.meta.msg) 
                // 5，如果登录成功
                // console.log("登录成功") 
                this.$message.success('登录成功')

                // 6，保存token，并跳转
                window.sessionStorage.setItem('token', res.data.token)
                this.$router.push('/home')

                // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
                //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问，路由守卫
                //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
                // 2. 通过编程式导航跳转到后台主页，路由地址是 /home

                // if (valid) {
                //     alert('submit!');
                // } else {
                //     console.log('error submit!!');
                //     return false;
                // }
            });
        },
        resetForm(loginFormRef) {
            // console.log(this);      //当前登录组件的实例对象,this=>当前组件对象，其中的属性$refs包含了设置的表单ref
            this.$refs[loginFormRef].resetFields();
        }
    }

};
</script>

<style lang="less" scoped>
.login_container {
    background-color: #2b4b6b;
    height: 100%; //撑满整个页面
}

.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    //  垂直居中
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    // 图片
    .avatar_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        // 头部定位
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}


// 表单
.login_form {
    // margin-top: 100px;
    // margin-right: 40px;
    // 定位到底部
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box; 
// 改变盒子模型类型，使用padding不撑大
}

.btn {
    // text-align: center;
    // 弹性布局
    display: flex;
    // 右对齐，相当于
    justify-content: flex-end;
    // justify-content: center;
}
</style>